<template>
  <div class="detailPage">
    <edit-page-new
      @goBackPage="goBackPage"
      :rightBtnArr="rightBtnArr"
      :havePadding="false"
      showTopTitle
    >
      <template slot="editPageTitle">
        <i class="el-icon-document TitleImg"></i>
        新增人员
      </template>
      <div class="addPageContent">
        <el-row class="h100">
          <el-col class="h100" :span="11">
            <el-row class="h100">
              <el-col class="h100" :span="6">
                <edit-tree
                  ref="tree"
                  :treeSetting="treeSetting"
                  :hideBtn="hideBtn"
                  @handleClickTree="handleClickTree"
                  :filterNode="filterNode"
                />
              </el-col>
              <el-col class="h100" :span="18">
                <div class="table-list">
                  <list-table-new v-bind="tableConfig"></list-table-new>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col class="h100 middle" :span="2">
            <div>
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                size="mini"
                @click="addUser"
                >添加用户</el-button
              >
            </div>
          </el-col>
          <el-col class="h100" :span="11">
            <group-user ref="groupUser" />
          </el-col>
        </el-row>
      </div>
    </edit-page-new>
  </div>
</template>

<script>
import {
  getUserDataByOrg,
  addMultipleUser,
} from "@/api/systemManagement/userManagement.js";
import { orgTreeData } from "@/api/systemManagement/orgnizationManagement.js";
import groupUser from "./groupUser.vue";
export default {
  components: {
    groupUser,
  },
  data() {
    return {
      orgCode: "",
      orgName: "",
      rightBtnArr: [],
      treeSetting: {
        title: "",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      //表格数据配置
      tableConfig: {
        showAllSearch: true,
        showIndex: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, that) => {
            if (this.tableConfig.searchObj) {
              this.getTableData(params);
            } else {
            }
          },
          searchArr: [
            {
              type: "input",
              label: "用户名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        column: [
          {
            label: "用户名",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "组织",
            textAlign: "center",
            prop: "orgName",
            formatter: (row) => {
              if (row.orgVoList) {
                return row.orgVoList
                  .map((item) => {
                    return item.name;
                  })
                  .join(", ");
              } else {
                return "-";
              }
            },
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        pageSmall: true,
      },
      currentAddUser: [],
    };
  },
  created() {
    let { id, orgId } = this.$route.query;
    this.orgCode = orgId;
    this.getTreeData();
  },
  watch: {
    orgCode: {
      handler(val) {
        this.currentAddUser.forEach((item) => {
          item.org = val;
        });
      },
    },
  },
  methods: {
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //点击树
    handleClickTree(node) {
      this.orgCode = node.id;
      this.orgName = node.name;
      this.getTableData();
    },
    //添加用户
    addUser() {
      this.currentAddUser = this.$refs.groupUser.getSelectData();
      if (this.orgCode == "") {
        this.$message.warning("请先选择左侧的组织");
      } else if (this.currentAddUser.length == 0) {
        this.$message.warning("请勾选至少一个集团用户");
      } else {
        this.$confirm(`确定要添加选中用户到[${this.orgName}]吗`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.currentAddUser.forEach((item) => {
              item.orgId = this.orgCode;
              item.orgVoList = [
                {
                  id: this.orgCode,
                  name: this.orgName,
                },
              ];
            });
            addMultipleUser(this.currentAddUser).then((res) => {
              if (res.code) {
                this.$message.success(res.description);
                this.currentAddUser.length = 0;
                this.getTableData();
                this.updateListData();
                this.$refs.groupUser.clearSelect();
              }
            });
          })
          .catch(() => {});
      }
    },
    //获取人员列表数据
    getTableData(params) {
      if (params) {
        this.$set(this.tableConfig.searchObj, "queryData", params);
      }
      let queryData = Object.assign({}, this.tableConfig.searchObj.queryData);
      queryData.orgId = this.orgCode;
      getUserDataByOrg(queryData).then(
        (res) => {
          if (res.code) {
            this.$set(this.tableConfig, "tableData", res.data);
            this.$set(this.tableConfig, "totalNumber", res.total);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //得到组织树的数据
    getTreeData() {
      orgTreeData().then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            this.$set(this.treeSetting, "data", res.data);
            this.$refs.tree.setCurrentKey(this.orgCode);
            this.getTableData();
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    updateListData() {
      /* 通过localStorage来实现浏览器不同窗口之间的通信 */
      let num = Math.floor(Math.random() * 1000) + 1; //产生随机数，保证每次的值都不一样
      localStorage.setItem("update", num); //设置localStorage里面的值，保证每次都会触发storage事件
    },
    goBackPage() {
      window.close();
    },
  },
};
</script>

<style lang="less" scoped>
.detailPage {
  width: 100%;
  height: 100%;
  background-color: white;
  .TitleImg {
    margin-right: 2px;
    font-size: 22px;
  }
  .addPageContent {
    height: calc(100% - 20px);
    width: 100%;
    border-top: 10px solid #f2f3f8;
    .table-list {
      height: 100%;
      border-left: 10px solid #f2f3f8;
      padding: 20px;
    }
    .middle {
      display: flex;
      justify-content: center;
      align-items: center;
      border-left: 10px solid #f2f3f8;
      border-right: 10px solid #f2f3f8;
    }
    .right {
      height: 100%;
    }
  }
}
</style>